<template>
    <div id="appW">
        <Head class=""/>
        <el-row>
            <el-col :xs="2" :sm="2" :md="4" :lg="6" :xl="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :xs="20" :sm="20" :md="16" :lg="12" :xl="12">
                <div class="grid-content bg-purple-light">

                    <el-row>
                        <el-col :span="24" :offset="0">
                            <div class="grid-content bg-purple">
                                <h3>使用tk.mybatis快速开发curd</h3>
                                <div class="zuozhe">
                                    <el-row>
                                        <el-col :span="2" :xs="5">
                                            <div class="grid-content bg-purple-light">
                                                <img
                                                        style="height: 48px;width: 48px;border-radius: 500px;"
                                                        src="../../assets/ContNavimg/1.jpg"
                                                        alt
                                                >
                                            </div>
                                        </el-col>
                                        <el-col :span="22" :xs="19">
                                            <div class="qian grid-content bg-purple-light">
                                                <a href>千峰IT</a>
                                                <el-button
                                                        type="success"
                                                        size="mini"
                                                        round
                                                        style="height:28px; margin-left:5px;width:60px;"
                                                >+关注
                                                </el-button>
                                                <div class="zuozhe-r">
                          <span style="color:#ea6f5a!important;">
                            <i style="font-size:12px;" class="layui-icon layui-icon-diamond">13.0</i>
                          </span>
                                                    <span>2019.04.01 15:47</span>
                                                    <span>字数 677</span>
                                                    <span>阅读 532</span>
                                                    <span>评论 4</span>
                                                    <span>喜欢 14</span>
                                                </div>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
<!--            <el-col :xs="2" :sm="2" :md="4" :lg="6" :xl="6">-->
<!--                <div class="grid-content bg-purple-light"></div>-->
<!--            </el-col>-->
        </el-row>

        <Contents/>
        <Fenxiang/>
        <Like/>
        <Pinglun/>
        <comment :comments="commentData"></comment>
        <Dibu/>

<!--        返回按钮-->
        <div class="Goback hiddem-xs-only">
            <li class="hidden-sm-and-up yd-fanhui" :class="{'actives':index === isActives}" @click="changeTabs(index)">
                <router-link to="/"><p><i class="el-icon-back"></i></p></router-link>
            </li>
        </div>
    </div>
</template>

<script>
    import "element-ui/lib/theme-chalk/display.css";
    import Head from "../Head";
    import Contents from "../xinjianCont/content";
    import Fenxiang from "../xinjianCont/fenxiang";
    import Pinglun from "../xinjianCont/pinglun";
    import Dibu from "../xinjianCont/dibu";
    import Comment from '../xinjianCont/comment.vue';
    import * as CommentData from '../../mockdata.js';
    import Like from '../xinjianCont/like'

    export default {
        components: {
            Head,
            Contents,
            Fenxiang,
            Pinglun,
            Dibu,
            Comment,
            Like

        },
        data() {
            return {
                commentData: []
            }
        },
        created() {
            this.commentData = CommentData.comment.data;
        }
    };
</script>


<style scoped>
    #appW {
        margin-top: 70px;
        font-family: "Avenir", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    #appW h3 {
        margin-bottom: 20px;
        font-size: 34px;
    }

    /* 布局样式 */
    /* .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    } */
    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple-light {
        height: 48px;
        /* background: #e5e9f2; */
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        /*padding: 10px 0;*/
        /* background-color: #f9fafc; */
    }

    .qian a {
        color: black;
        text-decoration: none;
    }

    .zuozhe-r span {
        color: #969696;
        font-size: 12px;
        /*padding: 5px;*/
    }

    @media screen and (max-width: 750px) {
        #appW {
            width: 100%
        }

        #appW .bg-purple h3 {
            font-size: 18px;
        }

        .zuozhe-r{

        }
    }
</style>
